<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;height: 200px;
            border: solid 1px black;
            margin: 50px auto;
            line-height: 200px;text-align: center;
            font-size:50px;
        }
        #btn{
            width: 200px;height: 40px;
            display: block;
            margin: 0 auto;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">10</div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    var obox = document.querySelector("#box");
    var obtn = document.querySelectorAll("#btn")[0];
    var t;

    // =====================
    
    // obtn.onclick = function(){
    //     // 1.每次点击，开启计时器
    //     t = setInterval(function(){
    //         // 2. 计时器中改变容器中的数字
    //         obox.innerHTML--;
    //         // 3. 每改变一次，就判断是否为0
    //         if(obox.innerHTML <= 0){
    //             // 4. 清除计时器
    //             // console.log("停止计时器");
    //             obox.innerHTML = "结束了";
    //             clearInterval(t);
    //         }
    //     }, 1000);
    // }

    // ===================

    // 6. 假设一个状态，用来记录当前按钮是什么功能
    // 0表示开始，1表示暂停，2表示复位，初始是0开始
    var a = 0;

    var start = obox.innerHTML;

    obtn.onclick = function(){
        // 7. 每次点击都不能确定a的状态，都要进行判断
        if(a === 0){    // 表示开始功能
            // 5. 每次开启新计时器之前，先清除老计时器
            clearInterval(t);
            // 1.每次点击，开启计时器
            t = setInterval(function(){
                // 2. 计时器中改变容器中的数字
                obox.innerHTML--;
                // 3. 每改变一次，就判断是否为0
                if(obox.innerHTML <= 0){
                    // 4. 清除计时器
                    // console.log("停止计时器");
                    obox.innerHTML = "结束了";
                    clearInterval(t);
                    // 12. 到终点停止之后，将状态改成下次的状态：复位
                    a = 2;
                    // 同时修改文字，提升用户体验
                    obtn.value = "复位";
                }
            }, 1000);
            // 8. 开始功能执行之后，修改成下次的状态：暂停
            a = 1;
            // 同时修改文字，提升用户体验
            obtn.value = "暂停";
        }else if(a === 1){      // 9. 如果判断a的状态是1，执行暂停功能
            // 10. 清除计时器
            clearInterval(t);
            // 11. 修改状态为下次的状态：继续（开始）
            a = 0;
            // 同时修改文字，提升用户体验
            obtn.value = "继续";
        }else if(a === 2){      // 13.如果判断a的状态是2，执行复位功能 
            // 14. 设置容器内的数字为初始数字
            obox.innerHTML = start;
            // 15. 修改状态为下次的状态：开始
            a = 0;
            // 同时修改文字，提升用户体验
            obtn.value = "开始";
        }
    }

    // 一个元素的一个事件，执行多个不同功能，记录状态的思路

</script>
</html>